<link  href="style.css" rel="Stylesheet"/>
<center>
<a class="thumbnail" href="#thumb">rtgrt<span><img src="http://www.siamphone.com/picture/nokia/5235/nokia_5235_thumb.jpg" /><br />Simply beautiful.</span></a>

<a class="thumbnail" href="#thumb"><img src="image/imag2.jpg" width="100px" height="66px" border="0" /><span><img src="image/imag2.jpg" /><br />So real, it's unreal. Or is it?</span></a>

<br />
<br />

<table>
<tr><td id="showmenu1" class="thumbnail">
<a  href="#thumb">Dynamic Drive<span><img src="image/imag1.jpg" /><br />Dynamic Drive</span></a><br />
</td><td class="thumbnail">
<a  href="#thumb">Zoka Coffee<span><img src="image/imag1.jpg" /><br />Zoka Coffee</span></a>
</tr>
</table>

<span id="aaa"></span>



<table border="1"><tr><td><p>The mouse pointer position is at:</p> </td></tr></table><span></span>
</center>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
 <script>
//$(document).ready(function(){
//	$("table").mouseover(function(event){
//		x=event.pageX;
//		y=event.pageY;
//		x+=10;
//		y+=10;	
//		alert (x,y);
//		 $("span#aaa").text("X: " + event.pageX + ", Y: " + event.pageY);
////		$(".thumbnail:hover span").css({
////			position:"absolute",
////			left:x,
////			top:y
////		});
//		
//});
//}
$("td").click(function(){

    var column = $(this).parent().children().index(this);
    var row = $(this).parent().parent().children().index(this.parentNode);

    alert([column, ',', row].join(''));
});
$(function(){ 
  $("table").mousemove(function(event){ 
	var x=event.clientX;
	var y=event.clientY
	var xx = $("td").offset().left;
	var yy = $("td").offset().top;
    $("span#aaa").text("xx="+xx+" yy="+yy+" X: " + event.pageX + ", Y: " + event.pageY); 
	$(".thumbnail:hover span").css({
		position:"absolute",
		//left:x
		
	});
  });
});
 </script>